<template>
  <!-- sku详情弹出页面 -->
  <div>
    <van-popup v-model="popupShow" position="bottom" style="height: 60%">
      <div class="weapper">
        <!-- 上方区域 -->
        <div class="adapt wrapper-content"></div>
        <!-- 图片 -->
        <div class="currItem-img">
          <img :src="currItem.img" class="warpper-img-src" />
        </div>
        <!-- 标题 价格组合 库存 -->
        <div class="detailInfo">
          <span>{{ currItem.title }}</span>
          <span>{{ currItem.price }}</span>
          <div class="detail_inv">
            <span v-if="currItem.stock">库存：{{ currItem.stock }}</span>
          </div>
        </div>
      </div>
      <!-- 分割线 -->
      <div class="divider"></div>
      <!-- 商品组合 -->
      <div class="choice">
        <div>组合详情:</div>
        <!-- 循环父组件传过来的商品信息里的商品 -->
        <div
          v-for="(item, index) in currItem.skus"
          :key="index"
          @click="selectSepcs(item)"
        >
          <!-- 通过id判断是否选中 -->
          <div
            :class="['specsItem', item.id == currSelectId ? 'selected' : '']"
          >
            <span>{{ arr2SepcsList(item) }}</span>
            <span>￥{{ item.price }}</span>
          </div>
        </div>
      </div>
      <!-- 分割线 -->
      <div class="divider"></div>

      <!-- 购买数量 -->
      <div class="adapt">
        <div class="buycount-left">购买数量</div>
        <van-stepper v-model="buyAmount" class="buycount-right"></van-stepper>
      </div>

      <!-- 底部按钮 有可能是加入购物车 也可能是确定 -->
      <div class="buybottom">
        <van-button class="buybottom-button" @click="addShopping">
          {{ buyMode ? "确定" : "加入购物车" }}
        </van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Popup",
  data() {
    return {
      popupShow: false, //是否显示sku信息遮罩层
      buyMode: false, //控制popup底部车子是否加入购物车/确认
      buyAmount: 1, //购买数量
      currSelectId: 0, //当前选择的sku id
      currItem: {}, //另存父组件传递过来的值
      skuId: -1, //当前选择的id
    };
  },
  created() {
    if (this.goodsinfo) {
      this.currItem = this.goodsinfo;
    }
  },
  watch: {
    goodsinfo(newValue) {
      this.currItem = this.goodsinfo;
    },
  },
  methods: {
    // 将传进来的数组转化为中间带“，”的商品规格数组
    arr2SepcsList(arr) {
      let list = arr.specs.map((item) => item.value);
      return list.join();
    },
    selectSepcs(item) {
      this.currSelectId = item.id;
      this.currItem.title = item.title;
      this.currItem.stock = item.stock;
      this.currItem.price = item.price;
      this.skuId = item.id;
    },
    // 加入购物车/确定
    addShopping() {
      // 判断是否选中
      if (this.skuId === -1) {
        this.$toast.fail("请选择组合");
      } else {
        // 判断是加入购物车还是直接购买
        if (!this.buyMode) {
          // 点击加入购物车发生事情
          console.log("点击加入购物车");
          this.$store.commit("shopcart/addCar", {
            id: this.goodsinfo.id,
            selected: true,
            buyAmount: this.buyAmount,
            skuId: this.skuId,
          });
        } else {
          console.log("点击立即购买");
          this.$http
            .get("http://localhost:8080/sku/skus", {
              params: {
                ids: this.skuId,
              },
            })
            .then((res) => {
              let skuList = res.data;
              skuList[0].buyAmount = this.buyAmount;
              this.$store.commit("addOrder", skuList);
              this.$router.push({
                name: "buy",
                params: { buyMode: 0 },
              });
            });
        }
        this.buyAmount = 1;
        this.popupShow = false;
        this.skuId = -1;
        this.currItem = this.deepCopy(this.goodsinfo);
      }
    },
    deepCopy(data) {
      return JSON.parse(JSON.stringify(data));
    },
  },
  computed: {
    ...mapGetters(["addOrder"]),
  },
  watch: {
    goodsinfo(newValue) {
      this.currItem = this.deepCopy(this.goodsinfo);
    },
  },
  props: ["goodsinfo"],
};
</script>

<style scoped>
.weapper {
  margin: 15px 15px;
}
.detailInfo {
  text-align: left;
  display: flex;
  flex-direction: column;
  padding-left: 20px;
}
.detailInfo span:first-child {
  padding-top: 0;
}
.detailInfo span {
  padding: 3px 0;
}
.detailInfo .detail_inv {
  text-align: right;
}

.detailInfo .detail_inv span:last-child {
  color: #b2b2b2;
  font-size: 14px;
}
.adapt {
  zoom: 1;
  overflow: hidden;
}
.choice {
  text-align: left;
  margin: 10px 10px;
}
.divider {
  margin-top: 10px;
  height: 1px;
  width: 100%;
  background-color: #e9e9e9;
}
.warpper-img {
  float: left;
  width: 80px;
  height: 80px;
  background: black;
}
.warpper-img-src {
  max-height: 100%;
  max-width: 100%;
}
.buycount-left {
  float: left;
  margin: 10px 10px 10px 0;
}
.buycount-right {
  float: right;
  margin: 10px 0px 10px 10px;
}
.specsItem {
  padding: 6px 10px;
  margin: 10px 0px;
  font-size: 15px;
  background: #e9e9e9;
  border-radius: 6px;
  display: flex;
  border: 1px solid #e9e9e9;
  justify-content: space-between;
}
.buybottom {
  position: fixed;
  width: 100%;
  bottom: 0;
}
.buybottom-button {
  background-color: rgb(63, 41, 48);
  color: #fff;
  width: 100%;
  font-size: 18px;
}
.selected {
  border: 1.5px solid red;
  background: #d8d8d8;
}
</style>